<div style="padding:10px;">
 <%= form_for :user, :as => :user, :url => "/register", :html => {:class => "container", :id => "create-form", :'data-toggle' => "validator"} do |f| %>
  <%= render partial: 'layouts/errorMessages', locals: { model: @user } if @user.present? %>

  <input type="hidden" name="return_to" class="login-modal-redirect" value="<%= params[:return_to] || request.fullpath %>" />


    <% cache('feature_signup-notice-top', skip_digest: true) do %>
      <%= feature('signup-notice-top') %>
    <% end %>

    <div style="display:flex; justify-content: center;" class="col-12">
      <h3> Sign up with </h3>
    </div>

    <div style="display:flex; justify-content: center;" class="col-12">
      <%= render :partial => "layouts/social_icons" %>
    </div>

    <br style="clear:both;"/>
    <div class="row">
      <div class="col-md-6">
        <div class="form-group" id="username_div">
          <label for="username-signup"><%= translation('user_sessions.new.username') %></label>
          <%= f.text_field :username, { tabindex: 1, placeholder: "Username", class: 'form-control', id: 'username-signup' } %>
          <small class="invisible">Placeholder</small>
        </div>

        <div class="form-group">
          <label for="email"><%= translation('users._form.email') %></label>
          <%= f.text_field :email, { tabindex: 3, placeholder: "you@email.com", class: 'form-control', id: 'email' } %>
          <small class="invisible">Placeholder</small>
        </div>
      </div>

      <div class="col-md-6" style="display:flex; justify-content: center;">
        <div class="propic">
          <img class="something_something rounded" alt="Profile Photo" src="https://www.gravatar.com/avatar/1aedb8d9dc4751e229a335e371db8058" style="width: 120px; height: 115px; margin-top: 10px; margin-bottom: 25px; margin-left: 55px; background:#ccc;" onerror="this.src='https://www.gravatar.com/avatar/1aedb8d9dc4751e229a335e371db8058'">
          <div class="form-group">
            <span class="btn btn-outline-primary btn-file">
              <label id="selectProfilePhoto" for="something_else_unique">
              <u style="cursor: pointer;">Choose image</u> or drag one here
              <%= f.file_field :photo, id:"something_else_unique", onchange:'showFile(this, "something_something");', accept: "image/*", style: 'draggable: true' %>
            </span>
          </div>
        </div>
      </div>
    </div>

    <div class="form-group row">
      <div class="form-group col-md-6">
        <label for="password1"><%= translation('users._form.create_password') %></label>
        <%= f.password_field :password, { placeholder: 'Enter your new password',
                                          tabindex: 4,
                                          class: 'form-control',
                                          id: 'password1',
                                          onpaste: 'return false;' }
        %>
        <small class="invisible">Placeholder</small>
      </div>

      <div class="form-group col-md-6">
        <label for="password-confirmation"><%= translation('users._form.password_confirmation') %></label>
        <%= f.password_field :password_confirmation, { placeholder: I18n.t('users._form.confirm_password'),
                                                       tabindex: 5,
                                                       class: 'form-control',
                                                       id: 'password-confirmation',
                                                       onpaste: 'return false;' }
        %>
        <small class="invisible">Placeholder</small>
      </div>
    </div>

    <div class="form-group row">
      <div class="col-md-12">
        <label for="user-bio"><%= translation('users._form.bio') %></label>
        <%= f.text_area :bio, { placeholder: I18n.t('users._form.add_bio'),
                                            rows: 8,
                                            class: 'form-control',
                                            id: 'user-bio',
                                            tabindex: 6 }
        %>
      </div>
    </div>

    <% if Rails.env == "production" && !params[:spamaway] %>
      <div class="recaptcha-container">
        <%= recaptcha_tags %>
        <p>If you cannot use the ReCaptcha to verify you are not a bot, <a href="/signup?spamaway=true">use this alternative verification</a>.</p>
      </div>
    <% else %>

    <div>
      <%= render partial: 'users/spamaway', locals: {caller: caller } %>
    </div>

      <script>
        (function() {
          $('.spamaway button').click(function(e) {
            $(this).find('input').prop('checked', true);
          })
        })();
      </script>

    <% end %>

    <% cache('feature_signup-notice', skip_digest: true) do %>
      <%= feature('signup-notice') %>
    <% end %>

    <div class="col-md-12 form-group form-inline" style="clear:both;padding-top:10px;">
        <!-- button for creating new users -->
        <button style="margin-right:8px;" class="btn btn-lg btn-primary btn-save sranje" id="signup-button" type="submit" tabindex="7"><%= translation('users._form.sign_up') %></button>
        <span>or <a id="toLogin" href="/login">
          <%= translation('users._form.log_in') %>
        </a>
        </span>

      <script>
        (function() {
          $('.btn-save').click(function onClick(e) {
            $(this).addClass("disabled") // disable the button after it is clicked
                   .html("<i class='fa fa-spinner fa-spin'></i>"); // make a spinner that spins when clicked
          })
        })();
      </script>
    </div>

  <% end %>



  <script>
    $("a.signupToggle").click(function(e){ //When a button that toggles the signup is clicked
      e.preventDefault(); // stop the link from working normally
      setMode("signup"); // sets the mode of the modal to signup so it only shows the signup partial
      $('#loginModal').modal(); // toggles the modal
    })
    function showFile(inp, disp){
      if (inp.files && inp.files[0]){
        var reader = new FileReader();
        let dp = $(`.${disp}`);
        reader.onload = function(e) {
          dp.attr('src', e.target.result);
          dp.css("border", "1px solid #e6e6e6");

        };
        reader.readAsDataURL(inp.files[0]);
      }
    }
  </script>
</div>
<style>
  .btn-file {
      position: relative;
      overflow: hidden;
      border-color: #0059b3;
      border-style: dashed;
      border-width: 2px;
      padding: 13px;
      height: 50px;
      margin-bottom: 10px;
  }

  .btn-file input[type=file] {
      position: absolute;
      top: 0;
      right: 0;
      min-width: 100%;
      min-height: 100%;
      font-size: 100px;
      text-align: right;
      filter: alpha(opacity=0);
      opacity: 0;
      outline: none;
      background: white;
      cursor: inherit;
      display: block;
  }
  .nopadding {
    padding: 0 !important;
    margin: 0 !important;
 }

 .error {
    color: #D34836;
 }
</style>
